<!DOCTYPE html>
<html>
<head>
	<title>this is study html</title>
	<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- 内部样式表 -->
<style type="text/css">
	body{background-color: red}
	p{color: blue}
</style>

<!-- 样式表有三种：外部样式表、内部样式表以及内联样式 -->

</head>
<body bgcolor="white" background="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg">
	
	<h1 align="center">这是标题1</h1>
	<hr/><!--  水平线-->
	<!--注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）-->
	<p>这是段落1</p>
	
	<br/><!--  注释-->
	<a href = "http://www.w3school.com.cn">this is link</a>
	<br/>	
	<img src="./eg_w3school.gif" width="108" height="142" />
	<hr/>
	<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" alt="eg_w3school.gif" />
	<p> this is <br/> second</p>
	<br/>

</body>
<body style="background-color: yellow"><!--样式，，将取代属性gbcolor-->
	<!-- 内联样式表 -->
	<h2 style="background-color:red;font-family: verdana;font-size: 20px">This is a heading</h2>
	<p style="background-color:green;text-align: center;">This is a paragraph.</p>
	This text contains
	<sup>superscript</sup>
	<sub>suberscript</sub>
	<pre>
这是
预格式文本。
它保留了      空格
和换行。
	</pre>
	<b style="font-size: 40px">加粗</b>
	<br/>

	<code>Computer code</code>
	<br />
	<kbd>Keyboard input</kbd>
	<br />
	<tt>Teletype text</tt>
	<br />
	<samp>Sample text</samp>
	<br />
	<var>Computer variable</var>
	<br />

	<address>
	Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
	Visit us at:<br>
	Example.com<br>
	Box 564, Disneyland<br>
	USA
	</address>

	<abbr title="etcetera">etc</abbr>
	<p>hello world<br /></p>
	<abbr title="etcetera">era</abbr>
	<br />
	<acronym title="World Wide Web">WWW</acronym>
	<br />
	<acronym title="hello world html">HWH</acronym>
	<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

	<p>仅对于 IE 5 中的 acronym 元素有效。</p>

	<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
	<a href="#tips">有用的提示</a>

	<p>
	如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
	</p>

	<bdo dir = "rtl">   this r t l</bdo>
	<br/>
	<bdo dir = "ltr">this is l t r</bdo>
	<br/>

	这是长引用
	<blockquote cite="http://example.com/facts">
		<p>这是块引用</p>
	</blockquote>
	<q>
	这是短的引用。
	</q>
	<br/>

	<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

	<p>大多数浏览器会改写为删除文本和下划线文本。</p>

	<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

	<!--如果设置了 <dfn> 元素的 title 属性，则定义项目：-->
	<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>
	<!--如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目：-->
	<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
	<!--否则，<dfn> 文本内容即是项目，并且父元素包含定义。-->
	<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

	<!--用于著作标题-->
	<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

	<p>HTML samp 元素表示计算机输出示例：</p>

	<samp><b style="font-family: verdana;font-size: 40px">
	demo.example.com login: Apr 12 09:10:17
	Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189</b>
	</samp>

	<p>编程代码示例：</p>

	<code>
	var person = {firstName:"Bill", lastName:"Gats", age:50}
	</code>
	<P>var person = {firstName:"Bill", lastName:"Gats", age:50}</P>

	<p><var>E = m c<sup>2</sup></var></p>

	<a href="http://www.baidu.com" target="_blank">Donald Duck</a>

	<a name="tips">这是提示</a>
	<hr/>

	<hr/>
	<hr/>

	
	<hr/>

	<a href="http://www.w3school.com.cn/html/html_links.asp#tips" target="_blank">有用的提示2</a>

	<hr/>

	<p>	这是邮件链接：
	<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
	</p>

	<p>
	<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
	</p>


	<!-- 
	<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

	<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

	<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

	<p>请注意，bottom 对齐方式是默认的对齐方式。</p> 

	<p>
	<img src ="/i/eg_cute.gif" align ="left"> 
	带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
	</p>

	<p>
	<img src ="/i/eg_cute.gif" align ="right"> 
	带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
	</p>

	<p>
	您也可以把图像作为链接来使用：
	<a href="/example/html/lastpage.html">
	<img border="0" src="/i/eg_buttonnext.gif" />
	</a>
	</p>

	-->

	<p>每个表格由 table 标签开始。</p>
	<p>每个表格行由 tr 标签开始。</p>
	<p>每个表格数据由 td 标签开始。</p>

	<h4>一列：</h4>
	<table border="1">
		<!-- tr代表行   td代表列    th可以用来做表头，加粗显示-->
	<tr>
	  <td>100</td>
	</tr>
	</table>

	<h4>一行三列：</h4>
	<table border="1">
	<tr>
	  <td>100</td>
	  <td>200</td>
	  <td>300</td>
	</tr>
	</table>

	<h4>两行三列：</h4>
	<table border="1">
	<tr>
	  <td>100</td>
	  <td>200</td>
	  <td>300</td>
	</tr>
	<tr>
	  <td>400</td>
	  <td>500</td>
	  <td>600</td>
	</tr>
	</table>


	<ul>
		<li>aaa</li>
		<li>bbb</li>
	</ul>
	<ol>
		<li>11111</li>
	</ol>

	<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol> 

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  


<!-- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
 -->
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>


<div style="color:#00FF00;background-color: orange"  class="news">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>
<p class="tip"><span>提示：</span>... ... ...</p>

</body>
</html>